<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1200px;height:550px;" align="center"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
      let dataAxis = ['孟浩然', '宋之问','李商隐', '李白',
       '杜甫', '柳宗元', '王之涣', '王维', '白居易','金昌绪','韦应物','王勃','岑参','韦庄','张九龄','温庭筠',
        '刘禹锡','骆宾王','王昌龄','朱庆馀','杜牧','柳中庸',
        '高适','陈子昂','韩愈'];
      let data = [4, 3, 6, 28, 25, 8, 8, 10, 12, 5, 7, 11, 4, 5, 6, 5, 4,
      3, 5, 2, 12, 6, 4, 5, 16];
      let dataShadow = [];
      var option = {
        title: {
        text: '作者文章数量TOP25展示',
        left: 'center',
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: true,
          color: '#fff'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        z: 10
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999'
        }
      },
      dataZoom: [
        {
          type: 'inside'
        }
      ],
      series: [
        {
          type: 'bar',
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          },
          data: data
        }
      ]
      };
<!--      const zoomSize = 6;-->
<!--      myChart.on('click', function (params) {-->
<!--      console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);-->
<!--      myChart.dispatchAction({-->
<!--          type: 'dataZoom',-->
<!--          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],-->
<!--          endValue:-->
<!--            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]-->
<!--      });-->
      myChart.setOption(option);
    </script>
  </body>
</html>